<template>
	<el-select v-model="value" clearable style="width: 100%" :disabled="disabled" placeholder="请选择店铺">
		<el-option v-for="item in state.shopList" :key="item.shopId" :label="item.name" :value="item.shopId"></el-option>
	</el-select>
</template>
<script setup lang="ts" name="selectShop">
import { reactive, computed } from 'vue';
import { getList as getShopList } from '/@/api/shop/shopinfo';

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	defaultShop: {
		type: Boolean,
		default: false,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
});
const emit = defineEmits(['update:modelValue', 'shopChange']);

const value = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emit('update:modelValue', value);
		const shop = state.shopList.find((item: any) => item.shopId === value);
		emit('shopChange', shop);
	},
});

const state = reactive({
	shopList: [] as any,
});
const getShop = () => {
	getShopList({}).then((response) => {
		state.shopList = response.data.data;
		if (state.shopList && state.shopList.length == 1 && props.defaultShop) {
			const shop = state.shopList[0];
			value.value = shop.shopId;
		}
	});
};
getShop();
</script>
